<template>
	<view>
		<!-- <swiper @change="swpierChange" :style="{height:screenHeight + 'px'}">
			<swiper-item v-for="(value,index) in data" :key="index" @click="preImg(index)">
				<image :src="value" mode="widthFix"></image>
			</swiper-item>
		</swiper> -->

		<view class="video">
			<!-- #ifdef MP-WEIXIN -->
			<live-player
				:src="rtmp"
				autoplay
				@statechange="videoErrorCallback"
				@error="videoErrorCallback"
				style="width: 750upx; height: 65vh;"
			>
			<!-- 总人数 -->
			<cover-image v-for="(image,index) in demoImage" class="total-person image" :src="image.src" :key="index"></cover-image>
			<cover-view class="total-person">
				{{totalPerson}}人
			</cover-view>
			<!-- 当前操作人 -->
			<cover-image class="current-person current-person-image" :src="demoImage[0].src"></cover-image>
			<cover-view class="current-person">
				{{currentPerson}},游戏中
			</cover-view>
			<!-- 切换抓取视角 -->
			<cover-image class="change-vision" :src="exchange" @click="changeVision"></cover-image>
			<!-- 消息 -->
			<cover-view v-for="(message, index) in messageList" class="message" :key="index">{{message}}</cover-view>
			</live-player>
			<!-- #endif -->
			
			<!-- #ifdef APP-PLUS -->
			<video
				:controls="controls"
				:show-fullscreen-btn="fullscreen"
				autoplay
				id="myVideo"
				:src="rtmp"
				@error="videoErrorCallback"
			>
			<!-- 总人数 -->
			<cover-image v-for="(image,index) in demoImage" class="total-person image" :src="image.src" :key="index"></cover-image>
			<cover-view class="total-person">
				{{totalPerson}}人
			</cover-view>
			<!-- 当前操作人 -->
			<cover-image class="current-person current-person-image" :src="demoImage[0].src"></cover-image>
			<cover-view class="current-person">
				{{currentPerson}},游戏中
			</cover-view>
			<!-- 切换抓取视角 -->
			<cover-image class="change-vision" :src="exchange" @click="changeVision"></cover-image>
			<!-- 消息 -->
			<cover-view v-for="(message, index) in messageList" class="message" :key="index">{{message}}</cover-view>
			<!-- 设置 -->
			<!-- <cover-view class="float setting">
				s
			</cover-view> -->
			</video>
			<!-- #endif -->
		</view>
		<view class="action">
			<!-- 准备抓娃娃 -->
			<view v-if="ready" class="ready container">
				<button @click="switchView" type="default" plain="true" size="mini">开始抓娃娃</button>
			</view>
			<!-- 开始抓娃娃 -->
			<view v-else class="do container">
				<button @click="switchView" type="default" plain="true" size="mini">抓娃娃</button>
			</view>
		</view>
		<van-tabs swipeable sticky animated>
			<van-tab title="娃娃详情">
				<view class="article-content tab-container">
					<!-- <rich-text :nodes="detail.goods_desc"></rich-text> -->
					<rich-text :nodes="content"></rich-text>
				</view>
			</van-tab>
			<van-tab title="抓中记录">
				<view class="uni-list  tab-container" v-if="comments.length>0">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in comments" :key="key">
						<view class="uni-media-list">
							<view class="uni-media-list-logo">
								<image v-if="showImg" :src="list[0].img"></image>
							</view>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">{{value.author.username}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{value.time}}</view>
							</view>
						</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
const FAIL_CONTENT = '<p>获取信息失败</p>';
import { uniBadge } from '@dcloudio/uni-ui';
// import moment from 'moment';
import {
	mapState, 
	mapGetters,
	mapMutations,
	mapActions
} from 'vuex'
export default {
	components: {
		uniBadge
	},
	data() {
		return {
			messageList: ['抓着了','干的漂亮','太可惜了','我来试试'],
			totalPerson: 31,
			currentPerson: "熊二",
			exchange: '../../static/exchange.png',
			demoImage: [
				{sid:1,src:'../../static/home/1.png'},
				{sid:2,src:'../../static/home/2.png'},
				{sid:3,src:'../../static/home/3.png'}
			],
			showImg: true,
			list: [
				{
					title: "张三",
					content: "刚刚",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "李四",
					content: "两分钟前",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "王五",
					content: "14：22",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "张三",
					content: "刚刚",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "李四",
					content: "两分钟前",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "王五",
					content: "14：22",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "张三",
					content: "刚刚",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "王五",
					content: "14：22",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "张三",
					content: "刚刚",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "王五",
					content: "14：22",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
				},
				{
					title: "张三",
					content: "刚刚",
					img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
				}
			],
			content: '',
			ready: true,
			checked: true,
			columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
			rtmp: 'rtmp://58.200.131.2:1935/livetv/hunantv',
			// rtmp: "rtmp://ws.upstream.huya.com/huyalive/1446485778-1446485778-6664919164878357629-4760866626-10057-A-1551797429-1",
			// rtmp: "rtmp://ws.upstream.huya.com/huyalive/1446485778-1446485778-6664919164878357629-4760866626-10057-A-1551797429-1",
			imgShow: false,
			controls: false,
			fullscreen: false,
			index: 0,
			showBtn: false,
			screenHeight: 0,
			imgLength: 0,
			providerList: [],
			data: [],
			detailDec: '',
			tabIndex: 0,
			tabBars: [
				{
					name: '最新',
					id: 0,
					ref: 'new'
				},
				{
					name: '大公司',
					id: 23,
					ref: 'company'
				},
				{
					name: '内容',
					id: 223,
					ref: 'content'
				},
				{
					name: '消费',
					id: 221,
					ref: 'xiaofei'
				},
				{
					name: '娱乐',
					id: 225,
					ref: 'yule'
				},
				{
					name: '区块链',
					id: 208,
					ref: 'qukuailian'
				}
			]
		};
	},
	computed: {
		...mapGetters(["comments","detail"])
	},
	onLoad(option) {
		console.log(option.id);
		// this.getDetail();
		this.getComments({
			page: 1,
			per_page: 100,
			product: option.id
		});
		this.getDetail({product:option.id});
		
	},
	methods: {
		...mapActions(['getComments','getDetail']),
		changeVision() {
			
		},
		getDetail() {
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news/36kr/5182882',
				success: (result) => {
					if (result.statusCode == 200) {
						this.content = result.data.content;
						// console.log(this.content)
					} else {
						this.content = FAIL_CONTENT;
					}
				}
			});
		},
		switchView() {
			this.ready = !this.ready;
		},
		download() {
			uni.downloadFile({
				url: this.data[this.index],
				success: e => {
					uni.saveImageToPhotosAlbum({
						filePath: e.tempFilePath,
						success: () => {
							uni.showToast({
								icon: 'none',
								title: '已保存到手机相册'
							});
						},
						fail: () => {
							uni.showToast({
								icon: 'none',
								title: '保存到手机相册失败'
							});
						}
					});
				},
				fail: e => {
					uni.showModal({
						content: '下载失败，' + e.errMsg,
						showCancel: false
					});
				}
			});
		},
		collect() {
			uni.showToast({
				icon: 'none',
				title: '点击收藏按钮'
			});
		},
		//#ifdef APP-PLUS
		setting() {
			uni.showToast({
				icon: 'none',
				title: '正在设为壁纸'
			});
			setTimeout(() => {
				var WallpaperManager = plus.android.importClass('android.app.WallpaperManager');
				var Main = plus.android.runtimeMainActivity();
				var wallpaperManager = WallpaperManager.getInstance(Main);
				plus.android.importClass(wallpaperManager);
				var BitmapFactory = plus.android.importClass('android.graphics.BitmapFactory');
				uni.downloadFile({
					url: this.data[this.index],
					success: e => {
						var filePath = e.tempFilePath.replace('file://', '');
						var bitmap = BitmapFactory.decodeFile(filePath);
						try {
							wallpaperManager.setBitmap(bitmap);
							uni.showToast({
								icon: 'none',
								title: '壁纸设置成功'
							});
						} catch (e) {
							uni.showToast({
								icon: 'none',
								title: '壁纸设置失败'
							});
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '壁纸设置失败'
						});
					}
				});
			}, 100);
		},
		//#endif
		swpierChange(e) {
			this.index = e.detail.current;
			uni.setNavigationBarTitle({
				title: e.detail.current + 1 + '/' + this.imgLength
			});
		},
		preImg(index) {
			if (this.imgShow) {
				//防止点击过快导致重复调用
				return;
			}
			this.imgShow = true;
			setTimeout(() => {
				this.imgShow = false;
			}, 1000);
			setTimeout(() => {
				uni.previewImage({
					current: this.data[index],
					urls: this.data
				});
			}, 150);
		},
		getData(e) {
			uni.request({
				url: this.$serverUrl + '/api/picture/detail.php?id=' + e,
				success: res => {
					if (res.data.code !== 0) {
						uni.showModal({
							content: '请求失败，失败原因：' + res.data.msg,
							showCancel: false
						});
						return;
					}

					this.data = this.data.concat(res.data.data);
				},
				fail: () => {
					uni.showModal({
						content: '请求失败，请重试!',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	// background-color: $uni-theme;
}

swiper {
	flex: 1;
	width: 750upx;
	background-color: #000;
	display: flex;
	flex-direction: column;
}

swiper-item {
	display: flex;
	align-items: center;
}

image {
	width: 750upx;
	height: 1125upx;
}
.video {
	/* #ifdef APP-PLUS */
	margin-bottom: -14upx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	margin-bottom: -14upx;
	/* #endif */
	position: relative;
	.float {
		position: absolute;
		color: #fff;
	}
	
	.total-person {
		display: inline-block;
		float: right;
		width: 60upx;
		height: 60upx;
		color: #fff;
		border-radius: 60upx;
		background-color: #bbb;
		margin-top: 5vh;
		margin-right: 10upx;
	}
	.current-person {
		display: inline-block;
		float: left;
		width: auto;
		height: 60upx;
		color: #fff;
		border-radius: 60upx;
		background-color: #bbb;
		padding: 5upx;
		margin-top: 5vh;
		margin-left: 10upx;
	}
	.current-person-image {
		width: 60upx;
	}
	.change-vision {
		display: inline-block;
		float: right;
		width: 80upx;
		height: 80upx;
		// color: #fff;
		// border-radius: 10upx;
// 		border-top-left-radius: 10upx;
// 		border-bottom-left-radius: 10upx;
		background-color: $uni-theme;
		padding: 15upx;
		margin-top: 15vh;
		margin-right: 0;
		clear: both;
	}
	.message {
		display: block;
		float: left;
		// width: auto;
		// height: auto;
		color: #fff;
		border-radius: 10upx;
		background-color: #bbb;
		// padding: 1upx 5px 1upx 5upx;
		padding-left: 5upx;
		padding-right: 5upx;
		margin-top: 1vh;
		margin-left: 10upx;
		clear: both;
	}
	.setting {
		top: 40vh;
		right: 10upx;
	}
	
}
video {
	width: 100%;
	height: 65vh;
}
//操作区
.action {
	background-color: $uni-theme;
	height: 25vh;
	.container {
		height: inherit;
		width: 100vw;
		// padding: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.ready {
		// height: inherit;
	}
	.do {
// 		justify-content: flex-end;
// 		align-items: flex-end;
	}
}
button {
	// border-radius: 100% 100% 100% 100%;
}
// tab，包括娃娃详情、抓中记录
.tab-container {
	 padding: 10upx;
 }

</style>
